import React, {Component} from 'react'
import './DebuggerTools.less'

class DebuggerTools extends Component {
    constructor(props) {
        super(props)

        this.state = {
            items: []
        }

        this.addKeywordEvents = ::this.addKeywordEvents
    }

    /**
     * 监听键盘事件
     */
    addKeywordEvents(e) {
        let {key,target: {value}} = e
        let {items} = this.state
        let res = this.analysisJSCode('() => console.log(555)')

        if(key == 'Enter') {
            items.push(res)
            this.setState({
                items: items
            },() => {
                // console.log(this.state.items, 'items')
                
            })
        }

        
    }

    /**
     * 解析js代码
     */
    analysisJSCode(code) {
        let res = eval(code)
        console.log(res)
        return res
    }

    /**
     * 渲染输出内容
     */
    renderContent() {
        let {items} = this.state

        return items.map((v,i) => 
            (<div key={i}>{v}</div>)
        )
    }

    componentDidMount() {

    }

    render() {
        let {items} = this.state
        return (
            <div className={`content-tool`}>
                {
                   this.renderContent()
                }
                
                <div className='tool-items'>
                    <span>&gt;</span>
                    <input type='text' defaultValue={''} onKeyDown={this.addKeywordEvents} />
                </div>
            </div>
        )
    }
}

export default DebuggerTools